<template>
   <div class="tmpl">
       <nav-bar title="图文分享"></nav-bar>
       <div class="photo-title">
           <p v-text="imgInfo.title"></p>
           <span>发起日期： {{imgInfo.add_time | convertDate}}</span>
           <span>{{imgInfo.click}}次浏览</span>
           <span>分类：{{imgInfo.type}}</span>
       </div>
       <ul class="mui-table-view mui-grid-view mui-grid-9">
           <!-- 获取的数据 没可以绑定的元素 可以这样绑定下标 -->
           <li v-for="(img,index) in imgs" :key="index"  class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
               <vue-preview  class="preview-img" :slides="[{src: img.src,
                    msrc: img.src,
                    w: 600,
                    h: 380}]" 
                height="100"></vue-preview>
           </li>
       </ul>
       <div class="photo-desc">
           <p v-html="imgInfo.content"></p>
       </div>

       <div class="photo-bottom">
           <ul>
               <li class="photo-comment">
                   <div>
                       <span>提交评论</span>
                       <span><a>返回</a></span>
                   </div>
               </li>
               <li class="txt-comment">
                   <textarea v-model="msg"></textarea>
               </li>
               <li>
                   <button @click="sendComment">发表评论按钮</button>
               </li>
               <li class="photo-comment">
                   <div>
                       <span>评论列表</span>
                       <span>44条评论</span>
                   </div>
               </li>
           </ul>
           <ul class="comment-list">
               <li v-for="(comment,index) in comments" :key="index">
                   {{comment.user_name}}：{{comment.content}} {{comment.add_time | convertDate}}
               </li>
           </ul>
           <button @click="loadByPage">加载更多</button>
       </div>
   </div>
</template>

<script>
   export default {
       data () {
       return {
           imgInfo : {},
           imgs: [],
           comments: [],
           pageindex: 1,
           msg: ''
       }
   },
   created(){
       let id = this.$route.params.id;
       console.log(id)
       this.$ajax.get('imgsInfo/' + id)
       .then(res=>{
           this.imgInfo = res.data.info[0];
           console.log(res.data.info[0])
       })
       .catch(err=>{
           console.log(err)
       });
       
       this.$ajax.get('thumImgs/' + id)
       .then(res=>{
           this.imgs = res.data.data;
       })
       .catch(err=>{
           console.log(err)
       })

       this.loadFirst();
   },
   methods: {
       loadFirst(){
           this.$ajax.get('comments/' + 1)
           .then(res=>{
               this.comments = res.data.data
           })
           .catch(err=>{
               console.log(err)
           })
       },
       loadByPage(){
           this.$ajax.get('comments/' + (++this.pageindex))
           .then(res=>{
               this.comments = this.comments.concat(res.data.data);
           })
           .catch(err=>{
               console.log(err)
           })
       },
       sendComment(){
           
       }
   }
 }

</script>

<style scoped>
    li {
        list-style: none;
    }
    ul {
        margin: 0;
        padding: 0;
    }
    .photo-title {
        overflow: hidden;
        margin-top: 10px;
    }
    .photo-title,.photo-desc{
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        padding-bottom: 5px;
        margin-bottom: 5px;
        padding-left: 5px;
    }
    .photo-title p{
        color: #13C2F7;
        font-size: 20px;
        font-weight: bold;
    }
    .photo-title span{
        margin-right: 20px;
    }
    .mui-table-view.mui-grid-view.mui-grid-9 {
        background-color: white;
        border: 0;
    }
    .mui-table-view.mui-grid-view.mui-grid-9 li {
        border: 0;
    }
    .photo-desc {
        margin-top: 10px;
    }
    .photo-desc p {
        font-size: 18px;
    }
    .mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3 {
        /* padding: 2 2; */
        padding: 0;
        margin-left: -8px;
    }
    .preview-img {
        height:100px;
        width: 100%;
    }
    .photo-comment > div span:nth-child(1){
        float: left;
        font-weight: bold;
        margin-left: 5px;
    }
    .photo-comment > div span:nth-child(2){
        float: right;
    }
    .photo-comment {
        height: 30px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.4);
        line-height: 30px;
        margin-bottom: 5px;
    }
    .txt-comment{
        padding: 5 5;
    }
    .txt-comment textarea{
        margin-bottom: 5px;
    }
    .comment-list li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        padding-bottom: 5px;
        margin-bottom: 5px;
        padding-left: 5px;
    }
    li {
        list-style: none;
    }
    ul{
        margin:0;
        padding: 0;
    }
</style>
